<template>
    <div class="div">
        &nbsp;&nbsp;仪器信息&nbsp;
        <!-- <a-button size="middle" type="text" style="border: 0px solid #a8aeb2;font: 0.9em sans-serif;" preIcon="ant-design:plus-outlined"  @click="addItem">添加</a-button> -->
    </div>
    <table id="dev" cellspacing="1" style="width: 100%;height: 150px;border: 1px solid #a8aeb2;">
        <tr class="tr">
            <th class="thC">序号</th>
            <th class="thB">仪器名称</th>
            <th class="thD">编号</th>
            <th class="thD">有效期</th>
            <th class="thD">操作</th>
        </tr>
        <tr class="tr" v-for="(item, index) in labRecordDevList" :key="index">
            <th class="thC">{{ index + 1 }}</th>
            <td class="thB">
                {{ item.devName }}
            </td>
            <td class="thD">
                {{ item.devNum }}
            </td>
            <td class="thD">
                {{ item.devValidity }}
            </td>
            <td class="thD">
                <!-- <a-button type="link" >添加</a-button> -->
                <a-button type="link" @click="removeItem(index)" danger>删除</a-button>
            </td>
        </tr>
    </table>
    <!-- <TableDevModal @register="registerDevModal" @getSelectResult="onSelectOk"></TableDevModal> -->
</template>
  
<script lang="ts" setup>
import { defineProps, defineExpose, ref } from 'vue';
// import TableDevModal from './LabDevAndUteList.vue';
// import { useModal } from '/@/components/Modal';

const props = defineProps<{
    labRecordDevList: [{
        id: string,
        taskId: string,
        itemId: string,
        devId: string,
        devName: string,
        devNum: string,
        devValidity: string,
    }]
}>();

// const labRecordDevList = ref(props.labRecordDevList || [{
//     id: "",
//     taskId: "",
//     itemId: "",
//     devId: "",
//     devName: "",
//     devNum: "",
//     devValidity: "",
// }]);

// function addItem() {
//     // labRecordDevList.value.push({
//     //     id: '',
//     //     taskId: '',
//     //     itemId: '',
//     //     devId: '',
//     //     devName: '',
//     //     devNum: '',
//     //     devValidity: '',
//     // });
//     handleUserModal();
// };

function removeItem(index) {
    props.labRecordDevList.splice(index, 1);
    // labRecordDevList.value.splice(index, 1);
};


// const [registerDevModal, { openModal }] = useModal();

// function handleUserModal() {
//     openModal(true);
// }

function onSelectOk(devList) {

    if (devList.length > 0) {
        props.labRecordDevList.splice(0, props.labRecordDevList.length);
        // labRecordDevList.value.splice(0, labRecordDevList.value.length);
        devList.forEach(item => {
            props.labRecordDevList.push({
                id: "",
                taskId: "",
                itemId: "",
                devId: item.devId,
                devName: item.devName,
                devNum: item.devNum,
                devValidity: item.devValidity,
            })
        });
    } else {
        if (props.labRecordDevList.length <= 0) {
            props.labRecordDevList.push({
                id: "",
                taskId: "",
                itemId: "",
                devId: "",
                devName: "",
                devNum: "",
                devValidity: "",
            })
        }

    }

}

defineExpose({
    props,
});


</script>
  
<style scoped>
.div {
    height: 45px;
    border: 1px solid #a8aeb2;
    background-color: #d2d5d6;
    text-align: left;
    font: 1.2em sans-serif;
    line-height: 45px
}

.tr {
    height: 50px;
    border: 1px solid #a8aeb2;
}


.thB {
    width: 30%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.thC {
    width: 10%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.thD {
    width: 23%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.2em sans-serif;
}

.input {
    border: none;
    background-color: inherit;
    outline: none;
    border-bottom: none;
}
</style>